<template>
  <div class="modify">
    <panel title="修改密码">
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            type="text"
            v-model="ruleForm.oldPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="nowPassword">
          <el-input
            type="password"
            v-model="ruleForm.nowPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="passwordAgain">
          <el-input
            type="password"
            v-model="ruleForm.passwordAgain"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleModify">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </panel>
  </div>
</template>
 
<script>
import local from '@/utils/local'
import { normalizeDate } from "@/utils/tools";
import {changePassword,examinePass} from '@/api/user.js'
import Panel from "../../components/panel/Panel.vue";
export default {
  components: { Panel },
  data() {
    // 验证函数
    const checkoldPassword =async (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入原密码~"));
      } else {
        // 先ajax验证原密码是否正确
        try {
          let res = await examinePass(this.ruleForm.oldPassword,this.user.id);
          let { msg } = res.data;
          if (res.data.code === "11") {
            callback(new Error(msg));
          } else if (res.data.code === "00") {
            this.$message({
              type: "success",
              message: msg,
            });
          }
        } catch (err) {
          console.log(err);
        }
        callback();
      }
    };
    const checknowPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码~"));
      } else if (value === this.ruleForm.oldPassword) {
        callback(new Error("不能与原密码相同！"));
      } else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
        callback(new Error("3 ~ 12 位,数字/字母/下划线"));
      } else {
        if (this.ruleForm.passwordAgain !== "") {
          // 当确认密码 不为空时
          this.$refs.ruleForm.validateField("passwordAgain");
        }
        callback();
      }
    };
    const checkpasswordAgain = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.nowPassword) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        oldPassword: "",
        nowPassword: "",
        passwordAgain: "",
      },
      rules: {
        oldPassword: [{ validator: checkoldPassword, trigger: "blur" }],
        nowPassword: [{ validator: checknowPassword, trigger: "blur" }],
        passwordAgain: [{ validator: checkpasswordAgain, trigger: "blur" }],
      },
   
    };
  },
  methods: {
    async amend(){
      try{
         let res=await changePassword(this.ruleForm.nowPassword,this.user.id)

        if(res.data.code===0){
           console.log(res.data);
           this.$router.push("/login");
           local.clear()
        }
      }catch(err){
        console.log(err);
      }
    },
    handleModify() {
     this.$refs.ruleForm.validate((valid) => {
        if (valid) {
       this.amend()
        } else {
          return;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
    created() {
    // 取数据
    this.user = local.get("user");

  },
};
</script>

<style lang="less" scoped>
.modify {
  width: 100%;
  height: 100%;
  padding: 20px;
  /deep/ .el-input__inner {
    width: 250px;
  }
  /deep/ .el-input {
    width: 250px;
  }
}
</style>